import React, { useEffect, useState } from 'react'
import { SearchWrapper } from './style'
import { SearchBar } from 'antd-mobile'
import laji from '../../assets/images/laji.png'

export default function Search() {
  const [value,setValue]=useState('')
  const [searchHistory,setSearchHistory]=useState([])

  const onSearch=(value)=>{
    setValue([])
 setSearchHistory([...searchHistory,value])
}
const onChange=(value)=>{
  setValue(value)

}
const clearStorage = () => {
 setSearchHistory([])
}
  return (
    <SearchWrapper>
      <div className="search-header">
         <SearchBar showCancelButton 
      value={value}
      placeholder='请输入内容'
      onSearch={(value)=>{onSearch(value)}}
       onChange={(value)=>{onChange(value)}}
       />
      </div>
     
        <div className="Search-history">
          <p>历史记录</p>
          <img src={laji} alt="" className="Search-history__icon"
          onClick={()=>{clearStorage()}}/>
          <div className="Search-history__items">
            {
              searchHistory.map((item, index) => {
                return (
                  <div className="Search-history__item" key={index}>
                    <div>{item}</div>
                  </div>
                )
              })
            }
          </div>
        </div>
        
    </SearchWrapper>
  )
}
